<template>
    <div>
        <!--        <el-carousel-->
        <!--                indicator-position="outside"-->
        <!--                :interval="9000"-->
        <!--                type="card"-->
        <!--                height="500px"-->
        <!--        >-->
        <!--            <el-carousel-item v-for="(item, index) in lunboImg" :key="index">-->
        <!--                <img :src="item.img" alt=""/>-->
        <!--            </el-carousel-item>-->
        <!--        </el-carousel>-->

        <div class="wrap">
            <div class="move">
            <div  v-for="(item, index) in LunboImg" :key="index">
                <img :src="item.img" alt=""/>
            </div>
            </div>

            <div class="dots">
                <div class="dot"></div>
                <div class="dot" style="animation-delay: 2s;"></div>
                <div class="dot" style="animation-delay: 4s;"></div>
                <div class="dot" style="animation-delay: 6s;"></div>
                <div class="dot" style="animation-delay: 8s;"></div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Lunbo",
        props:['LunboImg'],
        data() {
            return {};
        },
        methods: {},
    };
</script>

<style lang="less" scoped>


    @keyframes move {
        0% {
            left: 0;
        }
        20% {
            left: 0;
        }
        22% {
            left: -385px;
        }
        40% {
            left: -385px;
        }
        42% {
            left: -775px;
        }
        60% {
            left: -775px;
        }
        62% {
            left: -1155px;
        }
        80% {
            left: -1155px;
        }
        82% {
            left: -1540px;
        }

        100% {
            left: -1540px;
        }
    }



    @keyframes dot {
        0% {
            opacity: 1;
        }
        20% {
            opacity: 1;
        }
        22% {
            opacity: .7;
        }
        40%{
            opacity: .7;
        }
        100% {
            opacity: .7;
        }
    }



    .wrap {
        width: 100%;
        height: 400px;
        overflow: hidden;
        position: relative;
        margin: 90px auto 0 auto;
    }



    .wrap .move {
        width: 3500px;
        height: 300px;
        position: absolute;
        animation: move 8s linear infinite;
    }



    .wrap .move img {
        width: 340px;
        height: 300px;
        float: left;
        margin-right: 45px;
    }



    .wrap .dots {
        position: absolute;
        width: 160px;
        height: 16px;
        border-radius: 8px;
        left: 45%;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }



    .wrap .dots .dot {
        width: 15px;
        height: 15px;
        background-color: #1DD2AF;
        border-radius: 50%;
        opacity: .6;
        animation: dot 8s linear infinite;
    }

</style>
